<template>
  <div class="event-detail-page">
    <!-- 使用通用页头组件 -->
    <PageHeader 
      title="事件详情"
      :showLeftButton="true"
      leftText="返回"
      leftIcon="←"
      @left-button-click="handleLeftButton"
    >
      <template #right>
        <el-dropdown placement="bottom-start" trigger="click">
          <span class="header-button right-button">
            操作 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
             <el-dropdown-menu>
              <el-dropdown-item @click="editEvent">
                <el-icon><EditPen /></el-icon> 编辑
              </el-dropdown-item>
              <el-dropdown-item @click="confirmDelete" divided>
                <el-icon><Delete /></el-icon> 删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </PageHeader>
    
    <div class="content">
      <!-- 事件详情内容 -->
      <div v-if="event" class="event-detail">
        <!-- 事件标题 -->
        <h1 class="event-title">{{ event.title }}</h1>
        
        <!-- 事件元信息 -->
        <div class="event-meta">
          <div class="meta-item">
            <span class="meta-icon">📅</span>
            <span class="meta-text">{{ formatDate(event.date) }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-icon">🏷️</span>
            <span 
              class="meta-text event-type" 
              :class="`event-type-${event.type}`"
            >
              {{ getEventTypeLabel(event.type) }}
            </span>
          </div>
        </div>
        
        <!-- 事件图片展示 -->
        <div v-if="event.images && event.images.length > 0" class="event-images">
          <div class="image-slider">
            <img 
              v-for="(image, index) in event.images" 
              :key="index"
              :src="image" 
              :alt="`${event.title}的照片 ${index + 1}`"
              class="event-image"
            >
          </div>
          <div class="image-indicator">
            {{ currentImageIndex + 1 }} / {{ event.images.length }}
          </div>
        </div>
        
        <!-- 事件描述 -->
        <div class="event-description">
          <h3 class="section-title">事件描述</h3>
          <p class="description-text">{{ event.description }}</p>
        </div>
        
        <!-- 事件发生多久 -->
        <div class="event-time-ago">
          <span class="time-ago-text">
            {{ calculateTimeAgo(event.date) }}
          </span>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-else class="empty-state">
        <el-empty description="事件不存在"></el-empty>
      </div>
    </div>
    
    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteConfirm" class="confirm-dialog">
      <div class="confirm-dialog-content">
        <h3>确认删除</h3>
        <p>确定要删除这个事件吗？此操作无法撤销。</p>
        <div class="confirm-buttons">
          <button class="dialog-button cancel-button" @click="showDeleteConfirm = false">取消</button>
          <button class="dialog-button confirm-button" @click="deleteEvent">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import { getEventById, deleteEvent as deleteEventAPI } from '../services/api.js'

export default {
  name: 'EventDetailPage',
  components: {
    PageHeader
  },
  data() {
    return {
      event: null,
      showDeleteConfirm: false,
      showActionSheet: false,
      currentImageIndex: 0,
      eventTypes: {
        education: '教育经历',
        career: '职业发展',
        family: '家庭生活',
        health: '健康状况',
        travel: '旅行经历',
        hobby: '兴趣爱好',
        social: '社交活动',
        other: '其他事件'
      },
      loading: false
    }
  },
  computed: {
    eventId() {
      return this.$route.params.id
    }
  },
  mounted() {
    this.loadEvent()
  },
  methods: {
    async loadEvent() {
      this.loading = true
      try {
        const eventData = await getEventById(this.eventId)
        if (eventData) {
          this.event = eventData
        } else {
          this.$message.error('事件不存在或已被删除')
          this.$router.push('/')
        }
      } catch (error) {
        console.error('加载事件详情失败:', error)
        this.$message.error('加载事件详情失败')
      } finally {
        this.loading = false
      }
    },
    
    getEventTypeLabel(type) {
      return this.eventTypes[type] || '未知类型'
    },
    
    // 格式化日期显示
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    },
    
    // 计算事件发生了多久
    calculateTimeAgo(dateString) {
      const now = new Date()
      const eventDate = new Date(dateString)
      const diffMs = Math.abs(now - eventDate)
      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
      const diffMonths = Math.floor(diffDays / 30)
      const diffYears = Math.floor(diffMonths / 12)
      
      if (diffYears > 0) {
        return `发生在 ${diffYears} 年前`
      } else if (diffMonths > 0) {
        return `发生在 ${diffMonths} 个月前`
      } else if (diffDays > 0) {
        return `发生在 ${diffDays} 天前`
      } else {
        return '今天发生'
      }
    },
    
    // 显示删除确认
    confirmDelete() {
      this.showDeleteConfirm = true
    },
    
    // 编辑事件
    editEvent() {
      // 编辑事件，跳转到信息填写页面
      this.$router.push({
        path: '/add-event-info',
        query: { edit: true, id: this.event.id, type: this.event.type }
      })
    },
    
    // 删除事件
    async deleteEvent() {
      try {
        // 设置加载状态
        this.loading = true
        
        // 调用后端删除事件API
        await deleteEventAPI(this.event.id)
        
        // 显示成功提示
        this.$message.success('删除成功！')
        this.showDeleteConfirm = false
        
        // 删除后返回上一页
        setTimeout(() => {
          this.$router.back()
        }, 800)
      } catch (error) {
        console.error('删除事件失败:', error)
        this.$message.error('删除失败，请稍后重试')
        this.showDeleteConfirm = false
      } finally {
        this.loading = false
      }
    },
    
    // 处理左侧按钮点击
    handleLeftButton(defaultAction) {
      // 使用默认行为（返回上一页）
      defaultAction()
    }
  }
}
</script>

<style scoped>
.event-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部导航栏 - 移动端样式 */
.page-header {
  background-color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-button {
  height: 36px;
  padding: 0 12px;
  border: none;
  background: none;
  color: #409eff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.left-button {
  justify-content: flex-start;
}

.right-button {
  justify-content: flex-end;
}

.back-icon {
  margin-right: 4px;
  font-size: 18px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.content {
  padding: 16px;
  width: 100%;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* 为底部操作栏留出空间 */
  -webkit-overflow-scrolling: touch;
}

/* 事件详情内容 */
.event-detail {
  background: white;
  padding: 1rem;
  margin-bottom: 10px;
}

/* 事件标题 */
.event-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

/* 事件元信息 */
.event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.meta-text {
  font-size: 15px;
  color: #666;
}

/* 事件类型标签 */
.event-type {
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 14px;
  color: #fff;
}

/* 不同类型的标签颜色 */
.event-type-education {
  background-color: #409eff;
}
.event-type-career {
  background-color: #67c23a;
}
.event-type-family {
  background-color: #e6a23c;
}
.event-type-health {
  background-color: #f56c6c;
}
.event-type-travel {
  background-color: #909399;
}
.event-type-hobby {
  background-color: #c06c84;
}
.event-type-social {
  background-color: #5f76e8;
}
.event-type-other {
  background-color: #909399;
}

/* 事件图片展示 */
.event-images {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
  position: relative;
  aspect-ratio: 4/3;
}

.image-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

/* 事件描述 */
.event-description {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.75rem 0;
}

.description-text {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0;
  white-space: pre-wrap;
}

/* 事件时间信息 */
.event-time-ago {
  padding: 0.75rem 0;
  border-top: 1px solid #f0f0f0;
}

.time-ago-text {
  font-size: 14px;
  color: #999;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  background: white;
  margin: 10px;
  border-radius: 8px;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 1rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.action-button {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  transition: all 0.2s ease;
}

.edit-button {
  background-color: #e6f7ff;
  color: #409eff;
  margin-right: 0.5rem;
}

.delete-button {
  background-color: #fef0f0;
  color: #f56c6c;
  margin-left: 0.5rem;
}

.button-icon {
  font-size: 18px;
}

/* 确认删除弹窗 */
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog-content {
  background-color: white;
  border-radius: 12px;
  padding: 1.5rem;
  width: 85%;
  max-width: 360px;
}

.confirm-dialog-content h3 {
  margin: 0 0 1rem 0;
  font-size: 18px;
  color: #333;
  text-align: center;
}

.confirm-dialog-content p {
  margin: 0 0 1.5rem 0;
  font-size: 16px;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.confirm-buttons {
  display: flex;
  gap: 1rem;
}

.dialog-button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  cursor: pointer;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-button {
  background-color: #f56c6c;
  color: white;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .event-detail {
    max-width: 600px;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
  }
  
  .bottom-action-bar {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px 12px 0 0;
  }
}

/* 隐藏滚动条但保留功能 */
.content::-webkit-scrollbar {
  display: none;
}

.content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>